<template>
  <a-modal
    title="查看採購單詳情"
    :width="760"
    :visible="visible"
    :confirmLoading="loading"
    @ok="() => { $emit('cancel') }"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading" style="padding:15px 25px;">
      <a-form :form="form" v-bind="formLayout">
        <a-row class="form-row" :gutter="48">
          <div v-for="(v, k) in fields" :key="k">
            <a-col :lg="12" :md="12" :sm="24">
              <a-form-item :label="v.label">
                <template>
                  <span>{{ v.customRender? v.customRender(model[v.key]) : model[v.key] }}</span>
                </template>
              </a-form-item>
            </a-col>
          </div>
        </a-row>
      </a-form>
      <a-table :columns="columns" :data-source="branchStorePurchaseOrder.branchStorePurchaseOrderGoodsList" :pagination="false">
        <a slot="name" slot-scope="text">{{ text }}</a>
        <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
        <span slot="tags" slot-scope="tags">
          <a-tag
            v-for="tag in tags"
            :key="tag"
            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
          >
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
        <span slot="action" slot-scope="text, record ,index">
          <a @click="handleDelete(index)">删除</a>
        </span>
      </a-table>
    </a-spin>
  </a-modal>
</template>

<script>
    import { _getById } from '@/api/BranchStorePurchaseOrder'

    const columns = [
      {
        title: '貨品名稱',
        dataIndex: 'goodsNameHk'
      },
      {
        title: '貨品編號',
        dataIndex: 'goodsNo'
      },
      {
        title: '貨品數量',
        dataIndex: 'quality'
      },
      {
        title: '貨品單位',
        dataIndex: 'goodsUnit'
      }
    ]

    export default {
        props: {
            visible: {
                type: Boolean,
                required: true
            },
            model: {
                type: Object,
                default: () => null
            },
          idBraStoPurOrd: {
              type: Number,
            default: 0
          }
        },
        data () {
            this.formLayout = {
            }
            return {
                form: this.$form.createForm(this),
                fields: [
                  { key: 'branchStoreName', label: '分店名稱' },
                  { key: 'no', label: '採購單編號' },
                  { key: 'purchaseDate',
                    label: '採購日期',
                    customRender: (date) => {
                      return this.$options.filters.formatDate(date)
                    }
                  },
                  { key: 'type',
                    label: '採購單類型',
                    customRender: (type) => {
                      if (type === 0) {
                        return '普通採購單'
                      } else {
                        return '鮮活採購單'
                      }
                    } },
                  { key: 'status',
                    label: '狀態',
                    customRender: (data) => {
                      if (data === 0) {
                        return '處理中'
                      } else if (data === 1) {
                        return '派貨中'
                      } else if (data === 2) {
                        return '已完成'
                      } else {
                        return '部分已完成'
                      }
                    }
                  }
                ],
                loading: false,
                selectList: {
                },
              branchStorePurchaseOrder: null,
              columns
            }
        },
        created () {
          this.$watch('visible', (val) => {
            if (val) {
              _getById({
                'idBraStoPurOrd': this.idBraStoPurOrd
              }).then((ret) => {
                this.branchStorePurchaseOrder = ret.data
              })
            }
          })
        },
        mounted () {
        },
        methods: {
        }
    }
</script>
